<!--
 * @Author: maomao
 * @Date: 2021-03-29 12:37:12
 * @Description: 弹出输入框
 * @FilePath: \his-dictionary-web\src\components\dialog-input-title.vue
-->
<template>
  <div></div>
  <div class="dx-field">
    <DxTextBox
      class="dx-field-value"
      width="100%"
      v-model:value="inputTitle"
      @enterKey='onClick'
    />
    <div class="botton">
      <DxButton
        :width="120"
        text="确认保存"
        type="default"
        styling-mode="outlined"
        @click="onClick"
      />
    </div>
  </div>
</template>
<script lang="ts">
import DxTextBox from "devextreme-vue/text-box";
import DxButton from "devextreme-vue/button";
import DxForm from "devextreme-vue/form";
import { Options, Vue } from "vue-class-component";
@Options({
  components: {
    DxTextBox,
    DxButton,
    DxForm,
  },
  props: {
    title: String,
  },
  emits: ["change"],
})
export default class DialogInputTitle extends Vue {
  title!: string;
  inputTitle = "";
  buttonDisabled = true;
  mounted() {
    this.inputTitle = this.title;
    console.log(this.inputTitle);
  }
  onClick() {
    if (this.inputTitle.length === 0) {
      return;
    } else {
      this.$emit("change", this.inputTitle);
      this.inputTitle = "";
    }
  }
}
</script>
<style lang="scss" scoped>
.dx-field {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .botton {
    margin-top: 40px;
  }
}
</style>